<template>
	<view class="container">
		<view class="tui-header-fixed">
			<view class="tui-header">
				<view class="tui-rolling-search">
					<tui-icon name="search-2" :size="32" unit="rpx"></tui-icon>
					<!-- <icon type="search" :size="13" color="#999"></icon> -->
					<swiper vertical autoplay circular interval="8000" class="tui-swiper">
						<swiper-item v-for="(item, index) in hotSearch" :key="index" class="tui-swiper-item"
							@tap="search">
							<view class="tui-hot-item">{{ item }}</view>
						</swiper-item>
					</swiper>
				</view>
				

			</view>

		</view>
		<view class="tui-header-banner">
			<view class="tui-banner-bg">
				<view class="tui-primary-bg tui-route-left"></view>
				<view class="tui-primary-bg tui-route-right"></view>

				<view class="tui-banner-box">
					<swiper :indicator-dots="true" :autoplay="true" :interval="5000" :duration="150"
						class="tui-banner-swiper" :circular="true" indicator-color="rgba(255, 255, 255, 0.8)"
						indicator-active-color="#fff">
						<swiper-item v-for="(item, index) in banner" :key="index">
							<image :src="item.adv_image" class="tui-slide-image" mode="widthFix" />
						</swiper-item>
					</swiper>
				</view>
			</view>
		</view>
		
		<view class="yui-notice">
			<view class="yui-notice-icon-bg">
				<image src="/static/images/common/notices.png" class="yui-notice-icon" mode="widthFix">
				</image>
			</view>
			<view class="yui-notice-box tui-skeleton-rect">
				<swiper vertical autoplay circular interval="3000" class="yui-notice-swiper">
					<swiper-item v-for="(item,index) in noticeList" :key="index" class="yui-notice-swiper-item">
						<view class="tui-news-item">
							<text class="yui-notice-title">{{item.title}}</text>
						</view>
					</swiper-item>
				</swiper>
			</view>
		</view> 
		<view class="product-tabs">
			<view class="tabls-product tab-imgs">
				<view class="product-tips">
					<image src="/static/images/common/tips.png" class="product-tips-img" mode="widthFix"></image>
				</view>
				<view>
					体验区(A)
				</view>
				<view class="tables-small">
					预估:400元/期
				</view>
			</view>
			<view class="tabls-product tab-imgs1">
				<view class="product-tips">
					<image src="/static/images/common/tips.png"  class="product-tips-img"  mode="widthFix"></image>
				</view>
				<view>
					体验区(A)
				</view>
				<view class="tables-small">
					预估:3100元/期
				</view>
			</view>
			<view class="tabls-product tab-imgs2">
				<view class="product-tips">
					<image src="/static/images/common/tips.png"  class="product-tips-img"  mode="widthFix"></image>
				</view>
				<view>
					体验区(A)
				</view>
				<view class="tables-small">
					预估:8600元/期
				</view>
			</view>
		</view>
		<view class="tui-product-box">
			<view class="tui-product-list">
				<view class="tui-product-container">
					<block v-for="(item, index) in productList" :key="index">
						<!--商品列表-->
						<view class="tui-pro-item" hover-class="hover" :hover-start-time="150"
							@tap="detail(item.goods_id)">
							<image :src="item.pic_cover_mid" class="tui-pro-img" mode="widthFix" />
							<view class="tui-pro-content">
								<view class="tui-pro-tit">{{ item.goods_name }}</view>
						
								<view>
									<view class="tui-pro-price">
										<view class="tui-sale-price">
											<view class="yui-pricebox">¥</view>
											<view>{{ item.promotion_price }}</view>
										</view>
									</view>
									<text class="tui-factory-price">¥{{ item.market_price }}</text>
		                           
								</view>
							</view>
							<view class="tui-pro-content-right">
								<view class="tui-pro-content-right-bones">
									红包奖励
								</view>
								<view class="tui-pro-content-right-button">立即抢购</view>
								<view class="tui-pro-content-right-grey">16人已购</view>
								
							</view>
						</view>
					</block>
				
				
				</view>
			</view>
		</view>
		<!--加载loadding-->
		<tui-loadmore v-if="loadding" :index="3" type="red"></tui-loadmore>
		<tui-nomore v-if="!pullUpOn && isList" backgroundColor="#f7f7f7"></tui-nomore>



	</view>
</template>
<script>
	
	export default {
		data() {
			return {
				current: 0,
				currentTab: 0,
				hotSearch: [],
				scrollInto: '',
				banner: [],
				category_id: 1,
				backgroundColor: "linear-gradient(-90deg, #ED6732, #E33E13)",
				type: '',
				scrollTop: 0,
				old: {
					scrollTop: 0
				},
				productList: [],
				tabIndex: 0,
				category: [],
				noticeList: [],
				pageIndex: 1,
				loadding: false,
				pullUpOn: true,
				tabBars: [],
				
			};
		},
		onShow() {
			let obj = {};
			// #ifdef MP-WEIXIN
			obj = wx.getMenuButtonBoundingClientRect();
			// #endif
			// #ifdef MP-BAIDU
			obj = swan.getMenuButtonBoundingClientRect();
			// #endif
			// #ifdef MP-ALIPAY
			my.hideAddToDesktopMenu();
			// #endif
			this.currentTab = 0;
			
			this.init();
		},
		methods: {
			onTabItemTap(e) {
				if (e.index == 1) {
					uni.showToast({
						icon: 'none',
						title: '敬请期待',
						duration: 2000
					});
				}
			},

			scroll: function(e) {
				this.old.scrollTop = e.detail.scrollTop
			},
			change(e) {
				this.currentTab = e.index
				this.getList();	
			},

			addAddress() {
				uni.navigateTo({
					url: "/pageschild/editAddress/editAddress"
				});
			},
		    curls(url){
		    	if(url=='/pages/my/my'){
		    		uni.switchTab({
		    			url: url
		    		})
		    		
		    	}else{
		    		uni.navigateTo({
		    			 url: url
		    		});
		    	}
		    },
			init() {
				let token = this.tui.getToken();
				let datas = {
					token: token,
					id:4
				};
				//banner 
				let banner = this.tui.request('goods', 'post', datas, 1000, 1, '', 'banner');
				Promise.resolve(banner).then((value) => {
					if (value.code == 200) {
						this.banner = value.data.adv_list;
					}
				})
				
				let mddatas = {
					token: token,
					ap_id: 2
				};
				//banner 
				let banners = this.tui.request('goods', 'post', mddatas, 1000, 1, '', 'banner');
				Promise.resolve(banners).then((value) => {
					if (value.code == 200) {
						this.banners = value.data.adv_list;
					}
				})

				this.getList();
			},
			
			getList() {
				/* 获取默认商品类目产品 */

				let token = this.tui.getToken();
				let datas = {
					category_id: 112,
					sort: 'asc',
					page: this.pageIndex,
					limit: 10,
				};
				let products = this.tui.request('goods', 'post', datas, 1000, 1, '', 'goodsList');

				Promise.resolve(products).then((value) => {

					if (value.code == 200) {
						if (value.data) {
							this.productList = value.data.data;
						}
						this.skeletonShow = false
					} else {
						this.tui.toast(value.message);
					}
				})

			},
			noticeDetail: function(id) {
				uni.navigateTo({
					url: '../news/newsDetail/newsDetail?nid=' + id
				});
			},
			signRedMoney() {
				this.getSignAccount()
			},

        
			mores: function(e) {

				let key = e.currentTarget.dataset.key || '';
				let url = "";
				switch (key) {
					case '1':
						url = "/pagesA/activity/index"
						break;
					case '2':
						url = "/pagesA/user_sign/index"
						break;
					case '4':
						url = "/pagesA/special/special"
						break;
				}
				if (url) {
					uni.navigateTo({
						url: url
					})
				} else {
					// this.tui.toast("功能尚未完善~")
				}
			},
			detail: function(goods_id) {
				uni.navigateTo({
					url: '../productDetail/productDetail?goods_id=' + goods_id + '&type=1'
				});
			},
			storeList: function() {
				let token = this.tui.getToken();
				let selfList = this.tui.request('goods', 'post', {
					"token": token}, 1000, 1, '', 'storeSelf');
				Promise.resolve(selfList).then((value) => {
					if (value.code == 200) {
						this.storeProductList = value.data;
					}
				})
			},
			initNavigation(e) {
				this.opacity = e.opacity;
				this.top = e.top;
			},
			opacityChange(e) {
				this.opacity = e.opacity;
			},
			more: function(e) {
				uni.navigateTo({
					url: "../productList/productList?category_id=" + e
				})
			},
			categorys: function(e) {
				uni.navigateTo({
					url: '../productList/productList?category_id=' + e
				});
			},
			search: function() {
				uni.navigateTo({
					url: '../search/search'
				});
			}
		},
		onReachBottom: function() {
			// if (!this.pullUpOn) return;
			this.loadding = true;
			if (this.pageIndex == 4) {
				this.loadding = false;
				this.pullUpOn = false;
			} else {
				this.pageIndex = this.pageIndex + 1;
				let token = this.tui.getToken();
				let datas = {
					category_id: 112,
					sort: 'asc',
					page: this.pageIndex,
					limit: 10,
				};
				let result = this.tui.request('goods', 'post', datas, 1000, 1, '', 'goodsList');
				Promise.resolve(result).then((value) => {
					if (value.code == 200) {
						let newsdata = '';
						if (value.data.data) {
							value.data.data.forEach((item, index) => {
								this.value = [index, 0, 0];
								value.data.data[index].promotion_price = value.data.data[index]
									.promotion_price
									.split(".");;
							})

						}

						this.loadding = false;
					} else {
						this.tui.toast(value.message);
					}


				})

			}
		}
	};
</script>
<style>
	page {
		background-color: #eae8e8;
		width: 100%;
		min-height: 100%;
		display: flex;
	}

	.container {
		color: #333;
	}
	.product-tabs{
		margin-top: 20rpx;
		display: flex;
	} 
	.product-tips{
		position: relative;
		height: 36rpx;
		
	}
	.product-tips-img{
		position: absolute;
		right:30rpx;
		width:25rpx;
		top:0rpx;
		height:25rpx;
		z-index: 1000;
	}
	.tabls-product{
		color:#fff;padding:20rpx;
		width:100%;
		text-align: center;
	}
	.tables-small{
		font-size: 24rpx;
		margin-top: 20rpx;
	}
	.tab-imgs{
		background: url(/static/images/common/tab1.png) no-repeat center;
	}
	.tab-imgs1{
		background: url(/static/images/common/tab3.png) no-repeat center;
	}
	.tab-imgs2{
		background: url(/static/images/common/tab2.png) no-repeat center;
	}
	.yui-notice {
		display: flex;
		justify-content: left;
		padding: 12rpx 20rpx 6rpx 20rpx;
		background: rgba(139, 175, 238, 0.2);
	
		box-shadow: 1rpx 1rpx 6rpx #ebebeb;
		margin: 0rpx 20rpx 20rpx 20rpx;
		border-radius:80rpx;
		
	}
    .yui-notice-icon-bg {
    	margin-top: 4rpx;
		
    	text-align: center;
    }
	.yui-notice-icon {
		width: 40rpx;
		height: 40rpx;
		margin-top: 20rpx;
		margin-left: 10rpx;
	
	}
	.tui-tabs {
		flex: 1;
		display: flex;
		flex-direction: column;
		overflow: hidden;
		background-color: #fafafa;
	}
	.yui-spike-box-list{
		width:100%;
		text-align: center;
		padding-top: 40rpx;
	}
	.yui-spike-box-spans-list{
		width:100%;
		
	}
	.yui-spike-box-spans-list-img{
		display: flex;
		justify-content: space-between;
		width:100%;
	}
	.yui-spike-box-spans-list-imgs{
		height: 150rpx;
		width: 100%;
	}
	.yui-spike-box-block-list-img{
		text-align: center;
	}
	.yui-spike-box-spans-list-dtitle{
		font-size: 24rpx;
		color:#999999;
	}
	.yui-spike-box-spans-list-padding{
		padding:30rpx;
	}
	.yui-spike-box-spans-list-padding{
		padding:30rpx;
	}
	.yui-spike-box-spans-list-title{
		font-size: 28rpx;
		font-weight: bold;
	}
	.yui-spike-box-spans{
		 display: flex;
		 justify-content: space-between;
	}
	.yui-spike-box-block-title{
		text-align: center;
		font-size: 28rpx;
		font-weight: bold;
	}
	.yui-spike-box-block-dtitle{
		text-align: center;
		font-weight: bold;
		font-size: 24rpx;
		margin-top: 4rpx;
		color:#b1b1b1;
	}
	.yui-spike-box{
		background:#fff;
		margin:20rpx;
		border-radius: 16rpx;
		/* padding:30rpx; */
	}
	.yui-spike-box-line{
		border-left: 2rpx solid #eae9e9;
		height: 260rpx;
	}
	.yui-spike-box-block{
		
		border-top: 2rpx solid #eae9e9;
	    display: flex;
		text-align: center;
		justify-content: space-around;
	}
	.yui-pro-stocks{
		font-size: 24rpx;
		color:#999;
		display: flex;
		justify-content: space-between;
		margin-top: 10rpx;
	}
	.yui-pro-block{
		position: absolute;
		background:#F24438;
		right:20rpx;
		bottom:24rpx;
		color:#fff;
		font-size: 24rpx;
		padding:6rpx 20rpx;
		text-align: center;
		width:100rpx;
		border-radius: 14rpx;
	}
	.self-img{
		width:100%;
	}

	.tui-scroll-h {
		width: 750rpx;
		height: 80rpx;
		background-color: #ffffff;
		flex-direction: row;
		/* #ifndef APP-PLUS */
		white-space: nowrap;
		/* #endif */
	}

	.tui-line-h {
		/* #ifdef APP-PLUS */
		height: 1rpx;
		background-color: #cccccc;
		/* #endif */
		position: relative;
	}

	/*tabbar*/
	.tui-tabbar {
		width: 100%;
		position: fixed;
		display: flex;
		align-items: center;
		justify-content: space-between;
		z-index: 99999;
		background: #fff;
		height: 100rpx;
		left: 0;
		bottom: 0;
		padding-bottom: env(safe-area-inset-bottom);
	}

	.tui-tab-item {
		/* #ifndef APP-PLUS */
		display: inline-block;
		/* #endif */
		flex-wrap: nowrap;
		padding-left: 34rpx;
		padding-right: 34rpx;
	}

	.tui-tab-item-title {
		color: #555;
		font-size: 30rpx;
		height: 80rpx;
		line-height: 80rpx;
		flex-wrap: nowrap;
		/* #ifndef APP-PLUS */
		white-space: nowrap;
		/* #endif */
	}

	.tui-tab-item-title-active {
		color: #5677fc;
		font-size: 36rpx;
		font-weight: bold;
		border-bottom-width: 6rpx;
		border-style: solid;
		border-color: #5677fc;
		text-align: center;
	}

	.tui-acts-item {
		flex: 1;
		margin-right: 2%;
	}

	.kvbanner {
		padding: 0rpx 20rpx;
	}

	.tui-swiper-items {
		flex: 1 !important;
		flex-direction: row;
	}

	.tui-scroll-v {
		flex: 1;
		/* #ifndef MP-ALIPAY */
		flex-direction: column;
		/* #endif */
		width: 750rpx;
	}

	.fqtcause {
		padding: 0rpx 20rpx;
	}

	.tui-acts-item:last-child {

		margin-right: 0;
	}

	.yui-actives-tits {
		font-size: 36rpx;
		font-weight: bold;
	}

	.yui-pro-img-block {
		position: relative;
	}

	.yui-popbox-block {
		min-width: 540rpx;
		width: 100%;
	}

	.tui-acts-box-block {
		margin-bottom: 20rpx;
		display: flex;
	}

	.yui-popimage {
		min-width: 540rpx;
		width: 100%;
	}

	.yui-red-popbox-close {
		right: 0rpx;
		top: 80rpx;
		z-index: 1000;
		position: absolute;
	}

	.yui-red-popbox-closes {
		right: -30rpx;
		top: -30rpx;
		z-index: 1000;
		position: absolute;
	}

	.yui-red-popimage {
		min-width: 660rpx;
		width: 100%;
	}

	.yui-red-popimages {
		min-width: 600rpx;
		width: 100%;
	}

	.yui-qrimg {
		width: 80%;
		position: absolute;
		left: 35%;
		bottom: 37.5%;
	}

	.yui-face-qrimg {
		width: 80%;
		position: absolute;
		left: 41%;
		bottom: 75.5%;
	}

	.yui-red-qr {
		position: absolute;
		/* min-width: 660rpx;
		width: 100%; */
		width: 39%;
	}

	.yui-red-face {
		position: absolute;
		/* min-width: 660rpx;
		width: 100%; */
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
	}

	.good-goods {
		margin: 0rpx 20rpx 20rpx 20rpx;
		background: #fff;
		padding: 20rpx;
		border-radius: 8px;
	}

	.good-images {
		display: flex;
		margin-top: 15px;
		overflow-x: scroll;
	}

	.good-item[data-v-34c57316] {
		width: 74px;
		height: 74px;
		border-radius: 10px;
		margin-right: 10px;
	}

	.good-goods-title {
		display: flex;
		justify-content: space-between;
	}

	.good-goods .title {
		font-size: 16px;
		font-weight: 700;
		display: flex;

	}

	.good-goods .t1 {
		color: #ff2e37;
	}

	.good-goods .more {
		color: #888;
		display: flex;
		font-size: 28rpx;
	}

	.yui-img-tag {
		position: absolute;
		color: #fff;
		background: #e0b519;
		height: 40rpx;
		font-size: 22rpx;
		line-height: 40rpx;
		bottom: 0rpx;
		width: 100%;
	}

	.yui-img-tag-tis {

		padding-left: 10rpx;

	}

	.yui-pg-item {
		background: #fff;
		/* box-shadow: 0rpx 6rpx 2rpx rgba(0, 0, 0, .02); */
		/* margin: 20rpx; */
		padding: 40rpx 40rpx;
		border-radius: 10rpx;
		position: relative;
	}

	.yui-pop-ptbutton {
		width: 70%;
		padding: 20rpx 10rpx;
		position: absolute;
		bottom: 260rpx;
		font-size: 24rpx;
		left: 80rpx;
		text-align: center;
		margin: 0 auto;
		color: #fff;
		background: #ffae2a;
		border-radius: 40rpx;
	}

	.yui-red-account {
		width: 70%;
		padding: 20rpx 10rpx;
		position: absolute;
		bottom: 450rpx;
		font-size: 32rpx;
		left: 80rpx;
		text-align: center;
		margin: 0 auto;
		color: #fff;
	}

	.yui-red-money {
		width: 70%;
		padding: 20rpx 10rpx;
		position: absolute;
		bottom: 48.5%;
		font-weight: bold;
		font-size: 56rpx;
		left: 86rpx;
		text-align: center;
		margin: 0 auto;
		color: #ff5906;
	}

	.tui-header-fixed {
		left: 0;
		width: 100%;
		position: fixed;
		z-index: 900;
		top: 0;

	}

	.yui-pg-item-contain {
		display: flex;
		justify-content: left;
	}

	.yui-pg-foot-member {
		margin-left: 28rpx;
	}

	.yui-pg-foot-member-span {
		font-size: 20rpx;
	}

	.yui-tnums-button {

		/* padding: 4rpx 10rpx; */
		/* border: 2rpx solid #ff1505; */
		color: #ff1505;
		line-height: 40rpx;
		border-radius: 20px;
		font-size: 20rpx;
	}

	.yui-tuan-nums {
		display: flex;
		justify-content: space-between;
		margin-bottom: 60rpx;
		margin-top: 10rpx;

	}

	.yui-pro-tags {
		/* margin-top: 10rpx; */
		/* margin-bottom: 10rpx; */
		display: flex;
	}

	.yui-pro-tags-block {
		color: #fff;
		padding: 2rpx 6rpx;
		background: #9a8680;
		/* line-height: 10rpx; */
		font-size: 20rpx;
		border-radius: 6rpx;
		margin-right: 10rpx;
	}

	.model-ownshop {
		background: linear-gradient(180deg, #fff3e8 2%, #fff 38%);
	}

	.model-5 {
		padding: 12px;
		box-sizing: border-box;
		margin: 20rpx;
		border-radius: 8px;
		height: 231px;
		background: linear-gradient(180deg, #fff3f5, #fff3f5 2%, #fff 38%, #fff);
		margin-bottom: 10px;
	}

	.model-5 .line1 {
		display: flex;
		justify-content: space-between;
		margin-bottom: 15px;
	}

	.model-5 .model-title {
		font-size: 16px;
		color: #333;
		font-weight: 700;
		margin-right: 15px;
	}

	.model-5 .more {
		font-size: 14px;
		color: #888;
		display: flex;
		align-items: center;
	}

	.model-5 .line2-list {
		display: flex;
		justify-content: space-between;
	}

	.model-5 .line2 {
		width: 106px;
	}

	.model-5 .line2-img {
		width: 106px;
		height: 106px;
		border-radius: 8px;
	}

	.model-5 .title {
		font-size: 12px;
		color: #000;
		margin: 8px 0;
		text-overflow: ellipsis;
		white-space: nowrap;
		overflow: hidden;
	}

	.model-5 .price-wrap {
		display: flex;
		align-items: center;
	}

	.yui-picture {
		position: relative;
	}

	.yui-tuan-pricebox {
		font-size: 30rpx;
		margin-top: 6rpx;
	}

	.yui-normal-tuan-price {
		font-size: 36rpx;
	}

	.tui-swiper-box {
		flex: 1 !important;
		/* #ifdef H5 */
		margin-top: 80rpx;
		/* #endif */
	}

	.yui-pro-img {
		width: 220rpx;
		border-radius: 14rpx;
	}

	.yui-pro-img-disabled {
		opacity: 0.7;
	}

	.yui-it {
		font-size: 14rpx;
	}

	.tui-active-box {
		margin: 0 20rpx;
	}

	.yui-pg-item-box {
		margin-left: 20rpx;
		width: 100%;
	}

	.yui-pg-foot-number {
		font-size: 24rpx;
		color: #fff;
		height: 40rpx;
		background: #dae2e3;
		border-radius: 8rpx;
		margin-top: 4rpx;
		;
		padding: 0rpx 10rpx;
		line-height: 40rpx;

	}

	.yui-pg-foot {

		display: flex;
		justify-content: space-between;
		/* background:#dde5e7; */
		padding: 10rpx;
		margin-top: 8rpx;
	}

	.yui-ptbutton {
		position: absolute;
		right: 20rpx;
		bottom: 25rpx;
		padding: 10rpx 10rpx;
		background: linear-gradient(to right, #ff6811, #ff1505);
		border-radius: 4px;
		font-size: 20rpx;
	}

	.yui-ptbutton-grey {
		position: absolute;
		right: 20rpx;
		bottom: 30rpx;
		padding: 10rpx 10rpx;
		background: #d8d6d6;
		border-radius: 4px;
		font-size: 20rpx;
	}

	.yui-pg-num {
		background: #ffbe18;
		border-radius: 20rpx;
		font-size: 24rpx;
		color: #fff;
		padding: 2rpx 16rpx
	}

	.tui-qdbanner-img {
		width: 100%;
	}

	.yui-pg-item-box-title {
		display: flex;
		justify-content: left;
	}

	.yui-pg-title {
		font-size: 28rpx;
		font-weight: bold;
		padding-left: 16rpx;
		height: 40rpx;
		width: 60%;
		word-break: break-all;
		word-wrap: break-word;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		color: #333;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
	}

	.yui-pg-price-nums {
		margin-left: 6rpx;
		display: flex;
		justify-content: left;
	}

	.yui-normal-tuan-samll-price {
		font-size: 30rpx;
	}

	.tui-tuan-pro-price {
		font-size: 34rpx;
		display: flex;
		color: #ff1505;
		font-weight: bold;
	}

	.yui-pg-prices-cprice {
		color: #ffad10;
		margin-top: 20rpx;
		display: flex;
		justify-content: left;
	}

	.yui-pg-now-num {
		display: block;
		border-radius: 40rpx;
		font-size: 24rpx;
		border: 1px solid #FF6363;
		padding: 6rpx 10rpx;
		margin-bottom: 20rpx;
		color: #FF6363;
		text-align: center;
	}

	.yui-pg-item-price-info {
		display: flex;
		justify-content: space-between;
		width: 100%;
		margin-top: 40rpx;
	}

	.yui-pg-now-buy {
		background: linear-gradient(to right, #ff6811, #ff1505);
		border-radius: 8rpx;
		font-size: 26rpx;
		padding: 14rpx 30rpx;
		text-align: center;
		color: #fff;
		float: right;
		/* margin-top: 10rpx; */
	}

	.yui-pg-foot-member {
		display: flex;
		font-size: 24rpx;
		line-height: 40rpx;
		color: #9c9c9c;
		justify-content: left;
	}

	.yui-pg-foot-member-avator {
		width: 40rpx;
		height: 40rpx;
		border-radius: 20rpx;
		margin-left: -34rpx;
		margin-right: 10rpx;
	}


	.yui-pg-foot-number {
		font-size: 24rpx;
		color: #fff;
		height: 40rpx;
		background: #dae2e3;
		border-radius: 8rpx;
		margin-top: 4rpx;
		;
		padding: 0rpx 10rpx;
		line-height: 40rpx;

	}

	.product-banner {
		width: 100%;
	}

	.yui-location {
		color: #fff;
		display: flex;
		width: 140rpx;
	}

	.tui-product-list-block {
		background: #fff;
		border-radius: 10rpx;
		margin: 0rpx 0rpx 50rpx 0rpx;
	}

	.tui-location-arrow {
		margin-left: -10rpx;
		margin-top: -10rpx;
	}

	.yui-pg-price-nums {
		font-size: 40rpx;
	}

	.yui-qiandao {
		width: 100rpx;
		margin: 0 auto;
		margin-left: 20rpx;
		text-align: center;
		color: #fff;
		font-size: 24rpx;
	}

	.yui-qiandao-icon {
		width: 40rpx;
	}

	.yui-banner-ads {
		box-shadow: 1rpx 1rpx 6rpx #ebebeb;
		margin: 20rpx 20rpx 0rpx 20rpx;
		border-radius: 16rpx;
	}

	.yui-banner-imgs {
		border-radius: 20rpx;
		width: 100%;

	}

	.yui-tuan {
		width: 36rpx;
		margin-top: 5rpx;
	}

	.yui-normal-price {
		font-size: 26rpx;
		font-weight: bold;
	}

	.tui-group-name-title {
		font-size: 32rpx;
		text-align: left;
		/* line-height: 30rpx; */
		padding-left: 10rpx;
	}

	.tui-group-name-mystore {
		display: flex;
		line-height: 40rpx;
		position: absolute;
		right: 20rpx;
		top: 22rpx;
		font-size: 22rpx;
		font-weight: normal;
	}

	.yui-popclose {
		margin-top: 40rpx;
		width: 46rpx;
	}

	.yui-red-popclose {
		/* margin-top: 10rpx; */

		width: 106rpx;
	}

	.tui-group-name-mystores {
		margin-right: 20rpx;
		/* margin-top: 23rpx; */
		border-radius: 30rpx;
		border: 2rpx solid #ffffff;
		padding: 0 20rpx;
		display: flex;
		justify-content: space-between;
		line-height: 40rpx;
		height: 40rpx;
		font-size: 22rpx;
		font-weight: normal;
	}

	.yui-popbox {
		margin-top: 500rpx;
		position: relative;

		z-index: 10000;
	}

	.yui-red-popbox {
		margin-top: 500rpx;
		position: relative;

		z-index: 10000;
	}

	.tui-news-item {
		line-height: 28rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.yui-normal-samll-price {
		font-size: 20rpx;
	}

	.yui-notice-line {
		height: 50rpx;
		margin-left: 20rpx;
		width: 10rpx;
		background-color: #ecebeb;
	}

	.yui-notice-box {
		font-size: 24rpx;
		color: #848484;
		padding-left: 20rpx;
		line-height: 30rpx;
		margin-top: 6rpx;
		width: 70%;
	}

	.yui-block-icon {
		margin-left: 20rpx;
		margin-top: 22rpx;
		width: 40rpx;
	}

	.floor-list {
		white-space: nowrap;
	}

	.scoll-wrapper {
		display: flex;
		align-items: flex-start;
	}

	.tui-group-name-tabs {
		margin: 30rpx 0 20rpx 0;

		width: 100%;
	}

	.tui-pro-pt-img {
		width: 140rpx;
		height: 300rpx;
		border-radius: 10rpx;
		display: block;
	}

	.tui-pro-content {
		width: 50%;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		box-sizing: border-box;
		padding: 20rpx;
		position: relative;
	}
	.tui-pro-content-right{
		width:30%
	}

	.yui-pintuan-block-title {
		word-break: break-all;
		overflow: hidden;
		text-overflow: ellipsis;
		/* display: -webkit-box; */
		white-space: nowrap;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		font-size: 24rpx;
		font-weight: bold;
		padding-top: 18rpx;
		width: 160rpx;
	}

	.tui-sale-price {
		font-size: 34rpx;
		font-weight: 500;
		display: flex;
		color: #e41f19;
	}

	.yui-pintuan-block-price {
		color: #e41f19;
		font-weight: bold;
		display: flex;
		font-size: 26rpx;
		justify-content: left;
	}

	.yui-price-normals {
		justify-content: left;
		display: flex;
	}

	.model-4 .imgs {
		width: 21px;
		height: 21px;
	}

	.mb20 {
		margin-bottom: 60rpx;
	}

	.yui-pricebox {
		font-size: 22rpx;
		font-weight: bold;
		color: #e41f19;
	}

	.yui-hot {
		background: #fff;
		margin: 0rpx 20rpx 20rpx 20rpx;
		border-radius: 16rpx;
		box-shadow: 1rpx 1rpx 4rpx #ebebeb;
		padding: 20rpx 20rpx;
		

	}

	.yui-pintuan {
		display: flex;
		align-items: center;
		width: 100%;
		justify-content: space-between;
	}

	.yui-pintuan-block {
		background: #fff;

		width: 100%;
		margin: 0 12rpx 0 0rpx;
		/* box-shadow: 1rpx 1rpx 4rpx #ebebeb; */
	}

	.yui-pintuan-block-img {
		border-radius: 10rpx;
		padding: 20rpx 0;
		width: 100%;
		border-radius: 20rpx;
		margin-bottom: 20rpx;
		/* background:#bfbfbf; */
		height: 100rpx;
	}

	.yui-block-none {
		width: 6%;
	}

	.yui-block-img {
		width: 100%;
	}

	.yui-common-tit {
		padding-bottom: 20rpx;
	}

	.yui-comms-notice {
		font-size: 20rpx;
		padding-top: 10rpx;
		color: #aaa9a7
	}

	.yui-notice-icon-bg {

		/* padding: 2rpx; */
		padding-top: 2rpx;
		text-align: center;
		width: 34rpx;
	}

	.yui-notice-icon {
		margin-top: 8rpx;
		width: 38rpx;
	}

	.tui-safearea-bottom {
		width: 100%;
		height: env(safe-area-inset-bottom);
	}

	.model-4 {
		display: flex;
		margin: 100rpx 10rpx 5px 20rpx;
		margin: 0 auto;
		width: 94%;
		justify-content: space-between;
	}

	.card-4 {
		width: 67px;
		height: 67px;

		background: #fff;
		border-radius: 8px;
		padding: 5px 8px;
		box-sizing: border-box;
	}

	.model-4 .card-4 .title {
		font-size: 12px;
		color: #333;
		font-weight: 700;
	}

	.model-4 .card-4 .sub-title {
		font-size: 11px;
		color: #888;
	}

	.model-4 .card-4 .img-wrap {
		display: flex;
		margin-top: 3px;
		justify-content: flex-end;
	}

	.tui-tabbar::before {
		content: '';
		width: 100%;
		border-top: 1rpx solid #d9d9d9;
		position: absolute;
		top: 0;
		left: 0;
		-webkit-transform: scaleY(0.5);
		transform: scaleY(0.5);
	}

	.yui-notice-swiper {
		font-size: 24rpx;
		height: 40rpx;
		flex: 1;

	}

	.yui-notice-swiper-item {
		display: flex;
		align-items: center
	}

	.tui-tabbar-item {
		flex: 1;
		width: 25%;
		display: flex;
		align-items: center;
		flex-direction: column;
		justify-content: center;
		font-size: 24rpx;
		color: #666;
		height: 80rpx;
	}

	.tui-ptop-4 {
		padding-top: 4rpx;
	}

	.tui-scale {
		font-weight: bold;
		transform: scale(0.8);
		transform-origin: center 100%;
		line-height: 30rpx;
	}

	.tui-item-active {
		color: #e41f19 !important;
	}

	/*tabbar*/
	.tui-header {
		width: 100%;
		height: 100rpx;
		padding: 0 20rpx 0 20rpx;
		box-sizing: border-box;
		background: linear-gradient(to right, #8BAFEE, #528BE6);
		display: flex;
		align-items: center;
		justify-content: space-between;

		z-index: 999;
	}

	.tui-rolling-search {
		width: 100%;
		height: 60rpx;
		border-radius: 35rpx;
		padding: 0 40rpx 0 30rpx;
		box-sizing: border-box;
		background-color: #fff;
		display: flex;
		align-items: center;
		flex-wrap: nowrap;
		color: #999;
	}

	.tui-category {
		font-size: 24rpx;
		color: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		margin: 0;
		margin-right: 22rpx;
		flex-shrink: 0;
	}

	.tui-category-scale {
		transform: scale(0.7);
		line-height: 24rpx;
	}

	.tui-icon-category {
		line-height: 20px !important;
		margin-bottom: 0 !important;
	}

	.tui-swiper {
		font-size: 26rpx;
		height: 60rpx;
		flex: 1;
		padding-left: 12rpx;
	}

	.tui-swiper-item {
		display: flex;
		align-items: center;
	}

	.tui-hot-item {
		line-height: 26rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.tui-header-banner {
		/* padding-top: 100rpx; */
		
		margin-top: 100rpx;
		box-sizing: border-box;
		background: linear-gradient(to right, #8BAFEE, #528BE6);
	}

	.tui-hot-search {
		color: #fff;
		background: #E33E13;
		font-size: 24rpx;
		display: flex;

		align-items: center;
		justify-content: space-between;
		padding: 0 20rpx 20rpx 20rpx;
		box-sizing: border-box;
		position: relative;
		z-index: 2;
	}

	.tui-hot-tag {
		background-color: rgba(255, 255, 255, 0.15);
		padding: 10rpx 24rpx;
		border-radius: 30rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		line-height: 24rpx;
	}

	.tui-banner-bg {
		display: flex;
		height: 180rpx;
		background: linear-gradient(to right, #8BAFEE, #528BE6);
		position: relative;
	}

	.tui-primary-bg {
		width: 50%;
		display: inline-block;
		height: 224rpx;
		border: 1px solid transparent;
		position: relative;
		z-index: 1;
		background: linear-gradient(bottom,#8BAFEE, #528BE6);
	}

	.tui-route-left {
		transform: skewY(8deg);
	}

	.tui-route-right {
		transform: skewY(-8deg);
	}

	.tui-banner-box {
		width: 100%;
		padding: 0 20rpx;
		box-sizing: border-box;
		position: absolute;
		/* overflow: hidden; */
		z-index: 99;
		bottom: -80rpx;
		left: 0;
	}

	.tui-banner-swiper {
		width: 100%;
		height: 260rpx;
		border-radius: 12rpx;
		overflow: hidden;
		transform: translateY(0);
	}

	.tui-slide-image {
		width: 100%;
		height: 280rpx;
		display: block;
	}

	/* #ifdef MP-WEIXIN */
	.tui-banner-swiper .wx-swiper-dot {
		width: 8rpx;
		height: 8rpx;
		display: inline-flex;
		background: none;
		justify-content: space-between;
	}

	.tui-banner-swiper .wx-swiper-dot::before {
		content: '';
		flex-grow: 1;
		background-color: rgba(255, 255, 255, 0.8);
		border-radius: 16rpx;
		overflow: hidden;
	}

	.tui-banner-swiper .wx-swiper-dot-active::before {
		background-color: #fff;
	}

	.tui-banner-swiper .wx-swiper-dot.wx-swiper-dot-active {
		width: 16rpx;
	}

	/* #endif */

	/* #ifndef MP-WEIXIN */
	>>>.tui-banner-swiper .uni-swiper-dot {
		width: 8rpx;
		height: 8rpx;
		display: inline-flex;
		background-color: none;
		justify-content: space-between;
	}

	>>>.tui-banner-swiper .uni-swiper-dot::before {
		content: '';
		flex-grow: 1;
		background-color: rgba(255, 255, 255, 0.8);
		border-radius: 16rpx;
		overflow: hidden;
	}

	>>>.tui-banner-swiper .uni-swiper-dot-active::before {
		background-color: #fff;
	}

	>>>.tui-banner-swiper .uni-swiper-dot.uni-swiper-dot-active {
		width: 16rpx;
	}

	/* #endif */
	.yui-notice {
		margin: 110rpx 20rpx 0rpx 20rpx;
		/* border-radius: 16rpx; */
		padding: 10rpx 20rpx 10rpx 20rpx;
		display: flex;
	}

	.tui-product-category {
		background: #fff;
		padding: 30rpx 0rpx 10rpx 0rpx;
		margin: 110rpx 20rpx 20rpx 20rpx;
		box-shadow: 1rpx 1rpx 20rpx #ebebeb;
		border-radius: 20rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-wrap: wrap;
		font-size: 24rpx;
		color: #646464;
		/* padding: 20rpx 0; */
	}

	.tui-category-item {
		width: 25%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-direction: column;
		padding-bottom: 10rpx;
		/* padding-top: 30rpx; */
	}

	.tui-category-img {
		height: 90rpx;
		width: 90rpx;

		display: block;
	}


	.tui-category-name {
		margin-top: 10rpx;
		margin-bottom: 20rpx;
		line-height: 24rpx;
	}

	.tui-product-box {
		margin-top: 30rpx;
		padding: 0 20rpx;
		box-sizing: border-box;

	}

	.tui-product-box-block {
		background: #eae8e8;
		padding: 0rpx 0;
		margin-bottom: 20rpx;
		border-radius: 16rpx;

		color: #fff;
	}

	.tui-pb-20 {
		padding-bottom: 20rpx;
	}

	.tui-bg-white {
		background-color: #fff;
	}

	.tui-group-name1 {
		position: relative;
		background-size: 100%;
		text-align: center;
		border-top-left-radius: 16rpx;
		border-top-right-radius: 16rpx;
		line-height: 80rpx;
		font-size: 26rpx;
		font-weight: bold;
		display: flex;
		color: #333333;
	}

	.fqtcause-text {
		font-weight: bold;
		color: #333333;
	}



	.tui-activity-box {
		display: flex;
		border-radius: 12rpx;
		overflow: hidden;
	}

	.tui-activity-img {
		width: 100%;
		display: block;
	}

	.tui-new-box {
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-wrap: wrap;
	}

	.tui-new-item {
		width: 49%;
		height: 200rpx;
		padding: 0 20rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		background: #f5f2f9;
		position: relative;
		border-radius: 12rpx;
	}

	.tui-new-mtop {
		margin-top: 2%;
	}

	.tui-title-box {
		font-size: 24rpx;
	}

	.tui-new-title {
		line-height: 32rpx;
		word-break: break-all;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}

	.tui-new-price {
		padding-top: 18rpx;
	}

	.tui-new-present {
		color: #ff201f;
		font-weight: bold;
	}

	.tui-new-original {
		display: inline-block;
		color: #a0a0a0;
		text-decoration: line-through;
		padding-left: 12rpx;
		transform: scale(0.8);
		transform-origin: center center;
	}

	.tui-new-img {
		width: 160rpx;
		height: 160rpx;
		display: block;
		flex-shrink: 0;
	}

	.tui-new-label {
		width: 56rpx;
		height: 56rpx;
		border-top-left-radius: 12rpx;
		position: absolute;
		left: 0;
		top: 0;
	}

	.tui-product-list {
		display: flex;

		justify-content: space-between;
	
		box-sizing: border-box;
		/* padding: 10rpx 0rpx; */
	}

	.tui-product-lists {
		display: flex;

		justify-content: space-between;

		box-sizing: border-box;
		/* padding: 10rpx 0rpx; */
	}

	.tui-product-container {
		width: 100%;
		/* 	display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		flex: 1; */
		margin-right: 2%;
	}

	.tui-product-container:nth-child(2n) {
		margin-right: 0;
	}

	.tui-pro-item {
		width: 100%;
		margin-bottom: 4%;
		background: #fff;
		display: flex;
		box-sizing: border-box;
		border-radius: 12rpx;
		border-radius: 20rpx;
		box-shadow: 3rpx 6rpx 10rpx rgba(0, 0, 0, .04);
		overflow: hidden
	}

	.tui-pro-img {
		width: 33%;
		border-top-left-radius: 10rpx;
		border-top-right-radius: 10rpx;
		display: block;
	}

	.tui-pro-content {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		box-sizing: border-box;
		padding: 20rpx;
	}

	.tui-pro-tit {
		color: #2e2e2e;
		font-size: 26rpx;
		word-break: break-all;
		height: auto;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 4;
		-webkit-box-orient: vertical;

		/* margin-bottom: 24rpx; */
	}

	.tui-pro-price {
		display: flex;

		justify-content: space-between;
		color: #e41f19;
		/* margin-bottom: 10rpx; */

		padding-top: 18rpx;
	}



	.tui-factory-price {
		font-size: 22rpx;
		margin-bottom: 10rpx;
		color: #a0a0a0;
		text-decoration: line-through;
	}

	.tui-pro-pay {
		padding-top: 10rpx;
		font-size: 24rpx;
		color: #656565;
	}

	.scroll-view_H {
		width: 100%;
		overflow: hidden;
		white-space: nowrap;
	}

	.scroll-view-box {
		display: inline-block;
		width: 105px;
		height: 100%;
		margin-right: 6px;
	}

	.scroll-view-item_H {
		width: 105px;
		height: 100%;
	}

	.scramble-box {
		position: fixed;
		top: -60px;
		width: 300px;
		height: auto;
		border-radius: 16px 16px 0px 0px;
		background: #FFFFFF;
	}

	.scramble-box-img {
		overflow: hidden;
		width: 100%;
		height: 125px;
		border-radius: 16px 16px 0px 0px;
	}

	.scramble-box-text {
		width: 100%;
		border-radius: 0px 0px 16px 16px;

	}

	.scramble-text-a {
		font-size: 16px;
		font-weight: bold;
		color: #333333;
		line-height: 22px;
		text-align: center;
	}

	.scramble-text-b {
		margin-top: 6px;
		margin-left: 35px;
		font-size: 12px;
		font-weight: 400;
		color: #666666;
		line-height: 18px;
	}

	.scramble-text-c {
		margin-top: 12px;
		margin-left: 30px;
		font-size: 10px;
		font-weight: bold;
		color: #FF5622;
		line-height: 18px;
	}

	.scramble-button {
		margin-top: 6px;
		margin-bottom: 25px;
		width: 115px;
		height: 30px;
		background: #FF5622;
		border-radius: 15px;
		font-size: 14px;
		font-weight: bold;
		color: #FFFFFF;
		line-height: 30px;
		text-align: center;
	}


	.fqtcause-box {
		display: flex;
		justify-content: space-between;
		width: 100%;
		height: 180rpx;
	}

	.fqtcause-box-img {
		width: 346rpx;
		/* width: 345rpx; */
		height: 180rpx;
	}

	.tui-pro-items {
		display: flex;
		justify-content: space-between;
		width: 100%;
		height: 300rpx;
		margin-bottom: 20rpx;
		background: #fff;
		box-sizing: border-box;
		border-radius: 12rpx;
		border-radius: 20rpx;
		box-shadow: 3rpx 6rpx 10rpx rgba(0, 0, 0, .04);
		overflow: hidden
	}

	.tui-pro-imgs {
		width: 300rpx;
		height: 300rpx;
	}
	.tui-pro-content-right-bones{
		background:#F24438;
		color:#fff;
		padding:10rpx;
		font-size: 26rpx;
		border-radius: 10rpx;
		width:140rpx;
		text-align: center;
		margin-top: 60rpx;
	}
	.tui-pro-content-right-button{
		font-size: 26rpx;
		text-align: center;
		width:140rpx;
		background:#628BFE;
		padding:10rpx;
		margin-top: 20rpx;
		border-radius: 10rpx;
		color:#fff;
	}
	.tui-pro-content-right-grey{
		background:#f00;
	}
</style>
